<template>
  <div class="px-3 container">
    <div class="scroll-body">
      <!-- 头部标题 -->
      <div class="flex justify-between mt-4">
        <div class="flex flex-col justify-between pb-2">
          <div class="text-lg font-bold">Hi,您是第{{ indexInfo.all_conn }}位顾客!</div>
          <div class="text-base mb-2" style="color: #6482bb">{{ indexInfo.buss_name }}欢迎您</div>
        </div>
        <div class="header-photo">
          <image mode="heightFix" src="../../static/images/message.png" alt="" class="h-20" />
        </div>
      </div>

      <!-- 轮播图 -->
      <view class="" v-if="indexInfo?.banner?.length">
        <swiper class="rounded-lg h-40 w-full" circular :autoplay="true" :duration="500">
          <swiper-item v-for="(item, index) in indexInfo.banner" :key="index" class="rounded-lg">
            <a :href="item.url">
              <image :src="item.image" alt="" mode="scaleToFill" class="h-40 w-full" />
            </a>
          </swiper-item>
        </swiper>
      </view>

      <!-- 走马灯 -->
      <div v-if="indexInfo?.marquee" class="flex mt-4">
        <image src="../../static/images/popularize.png" mode="heightFix" alt="" class="h-5" />

        <component is="marquee" class="w-full ml-2" behavior="scroll" color="#2B477D">
          <div class="text-sm" style="color: #6482bb">
            {{ indexInfo.marquee }}
          </div>
        </component>
      </div>

      <div class="mt-3 grid grid-cols-5 text-center gap-y-4 gap-x-5 text-xs w-full">
        <!-- <a href="" class="flex flex-col">
            <image class="h-18" src="../../static/images/pay.png" alt="" mode="heightFix" />
            <span>我要支付</span>
          </a> -->
        <a
          v-for="(item, index) in indexInfo.menus"
          :key="index"
          :href="item?.url"
          class="flex flex-col"
        >
          <image class="rounded-3xl w-full h-13" :src="item?.icon" alt="" mode="scaleToFill" />
          <span class="mt-1">{{ item?.title }}</span>
        </a>
      </div>

      <!-- 图片导航栏 -->
      <div class="inline-grid grid-cols-2 w-full gap-2 mt-4">
        <a :href="indexInfo.hongbao" :class="disabled">
          <image class="h-28" src="../../static/images/nav_1.png" alt="" mode="heightFix" />
        </a>

        <a :href="indexInfo.huafei" class="">
          <image class="h-28" src="../../static/images/nav_2.png" alt="" mode="heightFix" />
        </a>

        <image
          :class="[disabled, 'h-28']"
          src="../../static/images/nav_3.png"
          alt=""
          mode="heightFix"
          @click="open"
        />

        <!-- <a :href="indexInfo.food_url" class="">
          <image class="h-28" src="../../static/images/nav_4.png" alt="" mode="heightFix" />
        </a> -->
        <image
          class="h-28"
          src="../../static/images/nav_6.png"
          alt=""
          mode="heightFix"
          @click="navtoHongBao"
        />
      </div>
    </div>

    <!-- <web-view :fullscreen="false" :webview-styles="webviewStyles" :src="indexInfo.shop_url" /> -->
    <div class="mt-4 mb-1 font-bold text-lg">附近商家</div>

    <div class="pb-30">
      <!-- <a  :href="item.url" class=""> -->
      <div
        v-for="(item, index) in shopList"
        :key="index"
        class="flex shadow items-center relative overflow-hidden"
      >
        <div
          class="absolute border-4 border-white w-14 h-14 rotate-90 rounded-full -right-2 -top-2 flex circle"
        >
          认证
        </div>

        <image mode="aspectFill" :src="item.picture" class="w-24 h-22"></image>

        <div class="ml-1 w-full overflow-hidden">
          <div class="font-semibold">{{ item.business_name }}</div>

          <!-- <div class="text-sm">
            <text class="text-gray-400">店铺名称:</text> {{ item.business_name }}
          </div> -->
          <div class="text-sm">
            <text class="text-gray-400">今日到店:</text> {{ item.today_conn }}
          </div>

          <div class="text-sm">
            <text class="text-gray-400">距离商家:</text> {{ item.distance }}
          </div>

          <div class="flex gap-2 text-sm">
            <div class="text-gray-400 whitespace-nowrap">商家位置:</div>
            <div class="ellipsis">
              {{ item.address }}
            </div>
          </div>
        </div>
      </div>
      <!-- </a> -->

      <div v-if="!shopList.length" class="text-center mt-2">暂无商家~</div>
    </div>

    <!-- <iframe
      frameborder="0"
      scrolling="no"
      class="article-iframe"
      id="myiframe"
      seamless
      :src="indexInfo.shop_url"
    ></iframe> -->

    <uni-popup ref="popup" type="center" v-bind="{ a: '', b: 'otherProp' }">
      <div class="bg-white w-80 h-60 text-center rounded-b-xl">
        <a :href="indexInfo.wifi_picture.url" class="w-80 h-52 block">
          <image class="w-80 h-52" :src="indexInfo.wifi_picture.image" alt="" mode="scaleToFill" />
        </a>

        <component
          is="wx-open-launch-weapp"
          id="launch-btn"
          username="gh_ba81995a3c6a"
          :path="wepPath"
          class="link_button block text-white text-center text-lg rounded-b-xl h-8 w-80 leading-8"
        >
          <component
            is="script"
            type="text/wxtag-template"
            class="link_button block text-white text-center text-lg rounded-b-xl h-8 w-80 leading-8"
          >
            <button
              class="link_button text-white text-center text-lg rounded-b-xl h-8 w-80 leading-8"
              @click="test"
            >
              <text
                style="
                  color: #ffffff;
                  text-align: center;
                  width: 100%;
                  display: block;
                  line-height: 32px;
                "
                >点击安全连接WIFI</text
              >
            </button>
          </component>
        </component>
      </div>
    </uni-popup>
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { useHttp } from '@/request/request'
  import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
  import weixin from 'weixin-js-sdk'

  const { post, get } = useHttp()

  const popup = ref()
  const wepPath = ref('')
  const disabled = ref('')
  const shopList = ref<
    {
      bid: '35082'
      business_name: '挪车码'
      location: '120.216124,30.185179'
      scene: '35'
      address: '浙江省杭州市滨江区西兴街道电魂大厦浙江新大集团有限公司'
      time: '2023-02-15 17:02:37'
      picture: 'statics/wifiewm/images/buss_headerimg02.jpg'
      advert_text: 'undefined'
      distance: '2.6km'
      today_conn: 19
      url: 'https://top.yfwnm.com/index.php/Article/index?bid=35082&sn=222120240890759203'
    }[]
  >([])

  const indexInfo = ref({
    banner: [
      {
        url: '',
        image: '',
      },
    ],
    buss_name: '',
    all_conn: 0,
    title: '',
    head_img: '',
    huafei: '',
    hongbao: '',
    go_buss: '',
    marquee: '',
    food_url: '',
    menus: [
      {
        title: '',
        url: '',
        icon: '',
      },
    ],
    shop_url: '',
    user_money_url: '',
    latitude: '',
    longitude: '',
    wifi_url: 0,
    wifi_picture: {
      id: '',
      title: '',
      image: '',
      url: '',
      admin_id: '',
      create_time: '',
      status: '',
      sort: '0',
      link: '',
    },
  })

  const newMenus = computed(() => {
    const l = indexInfo.value.menus.length
    if (l < 6) {
      indexInfo.value.menus.length = 5
      return indexInfo.value.menus
    } else if (l > 5) {
      return indexInfo.value.menus.slice(0, 5)
    }
  })

  const open = () => {
    popup.value.open()
  }

  const navtoHongBao = () => {
    uni.navigateTo({
      url: '/pages/index/hongbao',
    })
  }

  const test = () => {
    console.log('测试')
  }

  // 获取首页数据
  const getInfo = async (query: {
    ewm?: string
    count?: string
    num?: string
    bid: string
    unionid: string
    bname?: string
    sn: string
    mac: string
  }) => {
    const { bid, unionid, sn, mac } = query

    wepPath.value = sn ? 'pages/index/index?sn=' + sn : 'pages/index/index?s=' + bid + ',1,' + mac

    const res = await post('index/page_info', {
      bid,
      unionid,
      sn,
    })

    indexInfo.value = res.data

    uni.setNavigationBarTitle({
      title: res.data.title,
    })

    uni.setStorageSync('mall_url', indexInfo.value.go_buss) //储存店铺url
    uni.setStorageSync('locate_url', indexInfo.value.longitude + ',' + indexInfo.value.latitude) //储存店铺url
    uni.setStorageSync('user_money_url', indexInfo.value.user_money_url)

    const query_url = uni.getStorageSync('query_url') || ''

    weixin.hideMenuItems({
      // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
      menuList: ['menuItem:copyUrl'],
    })

    setTimeout(() => {
      console.log('query_url', query_url)
      weixin.onMenuShareAppMessage({
        title: res.data.title || '', // 分享标题
        desc: res.data?.sharing_content || '', // 分享描述
        link: location.href.split('#')[0], // 分享链接
        imgUrl: res.data?.head_img || '',
        success: function () {
          // 用户确认分享后执行的回调函数
          console.log('分享成功')
        },

        cancel: function () {
          // 用户取消分享后执行的回调函数
        },
      })
      // weixin.updateAppMessageShareData({
      //   title: res.data.title + '测试', // 分享标题
      //   desc: '万能商圈', // 分享描述
      //   link: 'http://mawifi.yfwnm.com/wnm_uniapp/index.html?' + uni.getStorageSync('query_url'), // 分享链接
      //   imgUrl:
      //     res.data.head_img ||
      //     'https://top.yfwnm.com/Uploads/popover_pic/2023-10-30/653f04e17c2d7.jpg', // 分享图标
      //   success: function () {
      //     // 用户确认分享后执行的回调函数
      //     console.log('分享成功')
      //   },
      //   cancel: function () {
      //     // 用户取消分享后执行的回调函数
      //   },
      // })
    })
  }

  const initData = async (query) => {
    const { bid, unionid, sn, openid } = query
    const a = uni.getStorageSync('location')
    const b = a.split(',')

    const res = await get('index/new_near_list_normal', {
      bid: 33547,
      latitude: 30.2084,
      longitude: 120.21201,
      province: '杭州',
      city: '滨江',
    })

    // res.data
    shopList.value = res.data

    console.log(res)
  }

  //获取url中的初始信息
  onLoad(async (query) => {
    const q = JSON.parse(uni.getStorageSync('query')) as {
      ewm: '1'
      count: '96'
      num: '239'
      bid: '33547'
      unionid: 'oSqUJ0uLmgiz7Q-pMwQkIMaRpdls'
      openid: 'oPbPOw6Sk6oGl5KaX9UKEpuCpKrw'
      bname: '孜然界烧烤张湾店'
      sn: '222110785161563278'
      mac: ''
    }

    getInfo(q)

    initData(q)
  })

  // uni.share({
  //   provider: 'weixin',
  //   title: indexInfo.value.title,
  //   scene: 'WXSceneSession',
  //   imageUrl:
  //     'https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=%E9%97%A8%E5%A4%B4%E7%85%A7&step_word=&lid=8863090582685908147&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=243716536,1422580340&os=2140877852,783744068&simid=243716536,1422580340&pn=1&rn=1&di=7264239678495129601&ln=1939&fr=&fmq=1698628738415_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=1e&objurl=https%3A%2F%2Fimg2.lepucdn.cn%2Flepu-upload%2F2019%2F03%2F20%2F54d8aa5dbe01c04045b550277fe5f521.jpg%40%2521original.jpg&rpstart=0&rpnum=0&adpicid=0&nojc=undefined&dyTabStr=MTEsMCwzLDIsMSw2LDQsNSw3LDgsOQ%3D%3D',
  // })

  // onShareAppMessage((res) => {
  //   return {
  //     title: indexInfo.value.title + '测试',
  //     path: '/pages/index/index?' + uni.getStorageSync('query_url'),
  //     imageUrl:
  //       indexInfo.value.head_img ||
  //       'https://top.yfwnm.com/Uploads/popover_pic/2023-10-30/653f04e17c2d7.jpg',
  //   }
  // })

  // function resizeCrossDomainIframe() {
  //   const iframe = document.getElementById('myiframe')
  //   window.addEventListener(
  //     'message',
  //     function (event) {
  //       console.log(event);

  //       if (event.origin !== 'https://nine.wifimsl.cn') return
  //       if (isNaN(event.data)) return // only accept something which can be parsed as a number
  //       const height = parseInt(event.data) // add some extra height to avoid scrollbar
  //       iframe && (iframe.height = height + 'px')
  //     },
  //     false
  //   )
  // }
</script>

<style scoped>
  .container {
    height: calc(100vh-50px) !important;
  }
  .link_button {
    color: #fff !important;
    background: linear-gradient(-180deg, #4aeba6, #04ba6b) !important;
  }

  .article-iframe {
    width: 100%;
    height: 6800px;
    border-radius: 0.15rem;
    /* pointer-events: none; */
    /*height: 500px;*/
  }

  .circle {
    justify-content: center;
    align-items: center;
    color: #fff;
    transform: rotate(45deg);
  }

  .disabled {
    pointer-events: none;
    cursor: default;
    -webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    -o-filter: grayscale(100%);

    filter: grayscale(100%);

    filter: gray;
  }

  .ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .shadow {
    /* box-shadow: 6rpx 6rpx 10rpx #e7e7e7; */
    background-color: #eee;
    border-radius: 12rpx;
    background: linear-gradient(to right, #fff, rgb(194, 235, 252));
    padding: 4px;
    box-sizing: content-box;
    margin-top: 2px;
    margin-bottom: 12px;
  }
</style>
